<template>
  <div class="container">
    <el-card>
      <div class="el-card-header">
        <div>试题录入</div>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subjectID" width="">
          <el-select
            v-model="ruleForm.subjectID"
            @change="handlerDirList(ruleForm.subjectID)"
            placeholder="请选择"
          >
            <el-option
              :label="item.label"
              v-for="item in subjectList"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择">
            <el-option
              :label="item.label"
              v-for="item in dirList"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="ruleForm.enterpriseID" placeholder="请选择">
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="province" style="">
          <el-select
            v-model="ruleForm.province"
            style="width: 250px"
            placeholder="请选择"
            @change="changeProvince(ruleForm.province)"
          >
            <el-option
              v-for="(item, index) in provinceList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

          <el-select
            v-model="ruleForm.city"
            style="width: 250px"
            placeholder="活动区域"
          >
            <el-option
              v-for="(item, index) in cityList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择">
            <el-option
              v-for="(item, index) in directionList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType">
            <el-radio
              v-for="item in questionTypeList"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio
              v-for="item in difficultyList"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <!-- 富文本编辑器 -->
          <quill-editor v-model="ruleForm.question"></quill-editor>
        </el-form-item>
        <el-form-item label="选项" v-if="Number(ruleForm.questionType) !== 3">
          <!-- 单选 -->

          <div>
            <el-radio-group
              v-model="code"
              v-if="Number(this.ruleForm.questionType) === 1"
            >
              <el-radio
                style="display: block"
                v-for="(item, index) in changeList"
                :key="index"
                @change="changeHand(item.code)"
                :label="item.code"
                v-model="item.isRight"
              >
                {{ item.code }}
                :
                <el-input
                  style="width: 500px"
                  v-model="item.title"
                  type="text"
                ></el-input>

                <uploadImg
                  :changeList="changeList"
                  :code="code"
                  ref="uploadImg"
                />
              </el-radio>
            </el-radio-group>
          </div>

          <!-- 多选 -->
          <div v-if="Number(ruleForm.questionType) === 2" class="">
            <div v-for="(item, index) in checkboxList" :key="index">
              <el-checkbox v-model="item.isRight">
                {{ item.code }} :<el-input
                  v-model="item.title"
                  type="text"
                ></el-input>
              </el-checkbox>
              <uploadImg ref="uploadImg" />
            </div>
          </div>
          <el-button
            type="danger"
            :disabled="Number(ruleForm.questionType) === 1"
            @click="addCheck"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <el-form-item label="解析视频">
          <el-input v-model="ruleForm.videoURL" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer">
          <!-- 富文本编辑器 -->
          <quill-editor v-model="ruleForm.answer"></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input
            type="textarea"
            style="width:600px height:300px"
            v-model="ruleForm.remarks"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题标签">
          <el-select
            v-model="ruleForm.tags"
            multiple
            placeholder="请选择试题标签"
          >
            <el-option
              v-for="item in tagList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="hSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as tagsList } from '@/api/hmmm/tags.js'
import { add, detail, update } from '@/api/hmmm/questions.js'

import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'

import { provincess, citys } from '@/api/hmmm/citys.js'
import { simple as directorysList } from '@/api/hmmm/directorys.js'
import { list as companyList } from '@/api/hmmm/companys.js'
import uploadImg from './uploadImg.vue'
export default {
  name: 'questions-new',
  components: { uploadImg },
  data () {
    return {
      dataID: this.$route.query.id,
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '', // 题干
        options: [], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 标签
      },
      rules: {
        subjectID: [{ required: true, message: '请选择', trigger: 'change' }],
        catalogID: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        enterpriseID: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        province: [{ required: true, message: '请选择', trigger: 'change' }],
        city: [{ required: true, message: '请选择', trigger: 'change' }],
        direction: [{ required: true, message: '请选择', trigger: 'change' }],
        questionType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        difficulty: [{ required: true, message: '请选择', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      subjectList: [],
      dirList: [],
      companyList: [],
      cityList: [],
      provinceList: [],
      tagList: [],
      code: '',
      // imageUrl: '',
      changeList: [
        {
          code: 'A',
          img: '',
          isRight: false,

          title: ''
        },
        {
          code: 'B',
          isRight: false,
          title: '',
          img: ''
        },
        {
          code: 'C',
          isRight: false,
          title: '',
          img: ''
        },
        {
          code: 'D',
          isRight: false,
          title: '',
          img: ''
        }
      ],
      checkboxList: [
        { code: 'A', title: '', isRight: false, img: '' },
        { code: 'B', title: '', isRight: false, img: '' },
        { code: 'C', title: '', isRight: false, img: '' },
        { code: 'D', title: '', isRight: false, img: '' }
      ],
      falg: false
    }
  },
  created () {
    this.loaderSubject()
    this.loaderCompany()
    this.getCity()
    this.directionList = direction
    this.questionTypeList = questionType
    this.difficultyList = difficulty

    console.log(this.dataID, 77777)
    if (this.dataID) {
      this.editHandler()
      this.falg = true
    }
  },
  methods: {
    async loaderSubject () {
      const res = await simple()
      // console.log(res, 555555)
      this.subjectList = res.data
      // this.handlerDirList()
    },

    async handlerDirList (value) {
      const obj = {
        subjectID: ''
      }
      obj.subjectID = value
      const res = await directorysList(obj)
      this.dirList = res.data
      const results = await tagsList(obj)
      // console.log(results, 786)
      this.tagList = results.data
    },

    async loaderCompany () {
      const res = await companyList()
      // console.log(res, 9999)
      this.companyList = res.data.items
    },
    getCity () {
      this.provinceList = provincess()
      // console.log(this.provinceList, 100001)
    },
    changeProvince (pname) {
      this.cityList = citys(pname)
      // console.log(this.cityList, 9009)
    },
    async editHandler () {
      const obj = { id: this.dataID }

      const res = await detail(obj)
      // console.log(res)
      this.ruleForm = res.data
      console.log(this.ruleForm, 555555)
      this.handlerDirList(this.ruleForm.subjectID)
      // this.ruleForm.tags = this.tagList

      this.ruleForm.tags = res.data.tags.split(',')
      // console.log(this.tagList, 54545)

      this.getCity()
      this.changeProvince()
      this.ruleForm.questionType = Number(res.data.questionType)
      this.ruleForm.difficulty = Number(res.data.difficulty)
      if (this.ruleForm.questionType === 1) {
        console.log(res.data)
        if (this.ruleForm.options.length == 0) {
          this.changeList = [
            {
              code: 'A',
              img: '',
              isRight: false,

              title: ''
            },
            {
              code: 'B',
              isRight: false,
              title: '',
              img: ''
            },
            {
              code: 'C',
              isRight: false,
              title: '',
              img: ''
            },
            {
              code: 'D',
              isRight: false,
              title: '',
              img: ''
            }
          ]
        } else {
          this.changeList = res.data.options
          this.changeList.forEach((item, index) => {
            if (item.isRight !== 0) {
              this.code = item.code
            }
          })
          console.log(this.changeList)
        }
      } else if (this.ruleForm.questionType === 2) {
        if (this.ruleForm.options.length == 0) {
          this.checkboxList = [
            {
              code: 'A',
              img: '',
              isRight: false,
              title: ''
            },
            { code: 'B', isRight: false, title: '', img: '' },
            { code: 'C', isRight: false, title: '', img: '' },
            {
              code: 'D',
              isRight: false,
              title: '',
              img: ''
            }
          ]
        } else {
          this.checkboxList = res.data
          console.log(this.checkboxList)
          // this.checkboxList.forEach((item, index) => {
          //   if (item.isRight !== 0) {
          //     item.isRight = true
          //   }
          // })
        }
      }
    },
    addCheck () {
      // const  a456
      const code = String.fromCharCode(
        'A'.charCodeAt(0) + this.checkboxList.length
      )
      // this.changeList.label = code
      this.checkboxList.push({
        code,
        img: '',
        isRight: false,
        title: ''
      })
      console.log(code)
    },
    changeHand (val) {
      const res = this.changeList.filter((item) => {
        return item.code === val
      })

      res[0].isRight = true
      this.$nextTick(() => {
        console.log(this.$refs.uploadImg, 9750087)
      })
    },
    getImg (change) {
      this.$refs.uploadImg.forEach((item, index) => {
        change[index].img = item.imageUrl
      })
      // console.log(this.changeList, 977777)
    },
    hSubmit () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        if (this.ruleForm.questionType === 1) {
          this.getImg(this.changeList)
          this.ruleForm.options = this.changeList
        } else if (this.ruleForm.questionType === 2) {
          this.getImg(this.checkboxList)
          this.ruleForm.options = this.checkboxList
        }

        this.ruleForm.questionType = String(this.ruleForm.questionType)
        this.ruleForm.difficulty = String(this.ruleForm.difficulty)
        console.log(this.ruleForm.tags, 10988)
        // if (this.ruleForm.tags === '') {
        //   this.ruleForm.tags = ''
        // } else {
        //   this.ruleForm.tags = toString(this.ruleForm.tags)
        // }
        this.ruleForm.tags = this.ruleForm.tags.join()
        console.log(this.ruleForm, 90766)
        console.log(this.dataID, 9797)
        console.log(this.falg)
        this.falg ? this.doEdit() : this.deAdd()
      })
    },
    async doEdit () {
      // const obj = { id: this.dataID }

      const res = await update(this.ruleForm)
      if (res.status === 200) {
        this.$router.push('list')
        this.$message.success('操作完成')
      }
    },
    async deAdd () {
      const res = await add(this.ruleForm)

      if (res.status === 200) {
        this.$router.push('list')
        this.$message.success('操作完成')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px 20px;
}

.el-card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  margin-bottom: 20px;
}
::v-deep .ql-editor {
  min-height: 300px;
}
.el-select {
  width: 500px;
}
::v-deep .el-textarea__inner {
  max-width: 500px;
  min-height: 150px !important;
}
.el-radio {
  margin: 5px 10px;
  // margin-right: 40px;
  // margin-top: 20px;
  // text-align: center;
  // position: relative;
}
.el-input {
  width: 500px;
}

.el-checkbox {
  margin: 5px 10px;
  text-align: center;

  // margin-right: 20px;
}
</style>
